<script setup lang="ts">
import { reactive } from "vue";
import { LockKeyhole, CircleUser } from "lucide-vue-next";
import { DoPost } from "@/utils/http";
import { Message } from "@arco-design/web-vue";
import type { EmployeeLoginEntity } from "@/shared/entity/employee";
import { setAuthHeader } from "@/utils/auth";
import { useRouter } from "vue-router";

const router = useRouter();

const formData = reactive({
  userName: "",
  password: "",
});

const handlerSubmit = async ({
  values,
}: {
  values: Record<string, string>;
}) => {
  const data = await DoPost<EmployeeLoginEntity>("/employee/login", values);
  setAuthHeader(data.data?.token || "");
  Message.success("登录成功");
  router.push("/workbench");
};
</script>

<template>
  <div
    class="min-h-screen flex items-center justify-center bg-gradient-to-br from-orange-50 via-white to-blue-50 p-4"
  >
    <div class="w-full max-w-md">
      <div class="text-center mb-8">
        <div
          class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-orange-500 to-red-500 rounded-full mb-4 shadow-lg"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-utensils w-8 h-8 text-white"
          >
            <path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"></path>
            <path d="M7 2v20"></path>
            <path d="M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"></path>
          </svg>
        </div>
        <h1
          class="text-3xl font-bold bg-gradient-to-r from-orange-600 to-red-600 bg-clip-text text-transparent"
        >
          苍穹外卖
        </h1>
        <p class="text-gray-600 mt-2">管理系统登录</p>
      </div>
      <div
        class="rounded-lg text-card-foreground shadow-2xl border-0 bg-white/80 backdrop-blur-sm"
      >
        <div class="flex flex-col p-6 space-y-1 pb-6">
          <h3
            class="font-semibold tracking-tight text-2xl text-center text-gray-800"
          >
            欢迎回来
          </h3>
          <p class="text-sm text-center text-gray-600">
            请输入您的账号信息登录系统
          </p>
        </div>
        <div class="p-6 pt-0">
          <a-form :model="formData" layout="vertical" @submit="handlerSubmit">
            <a-form-item
              field="userName"
              label="账号"
              :rules="[{ required: true, message: '请输入账号' }]"
            >
              <a-input
                placeholder="请输入账号"
                v-model="formData.userName"
                class="h-[44px]"
              >
                <template #prefix>
                  <CircleUser />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item
              field="password"
              label="密码"
              :rules="[{ required: true, message: '请输入密码' }]"
            >
              <a-input-password
                placeholder="请输入密码"
                v-model="formData.password"
                class="h-[44px]"
              >
                <template #prefix>
                  <LockKeyhole />
                </template>
              </a-input-password>
            </a-form-item>
            <a-form-item>
              <a-button
                size="large"
                type="primary"
                html-type="submit"
                class="w-full"
                >登录</a-button
              >
            </a-form-item>
          </a-form>
        </div>
      </div>
      <div class="mt-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
        <p class="text-sm text-blue-700 text-center">
          <strong>测试账号：</strong>admin<br /><strong>测试密码：</strong
          >123456
        </p>
      </div>
      <div class="text-center mt-6 text-xs text-gray-500">
        © 2024 苍穹外卖管理系统 All rights reserved.
      </div>
    </div>
  </div>
</template>
